<template>
  <div>
    <el-dialog :show-close="false" v-model="visibleCustomDocumentDialog" :before-close="closeCustomDocumentDialog"
      :modal-append-to-body="true" :append-to-body="true" id="custom-document-dialog" top="0" class="header-top">
      <div v-if="visibleCustomDocumentDialog" v-loading="Dialogloading" class="header-box">
        <div v-if="commonParams.step == 'first'" class="custom-document">
          <!-- 头部标题及搜索关闭等 -->
          <div class="dialog-header">
            <span class="header-title">
              <svg-icon icon-class="temps" class="header-img"></svg-icon>
              模板中心
            </span>

            <TempSearch ref="searchInput" @queryName="queryName" :HotNameArr="HotNameArr" />
            <div class="header-right">
              <el-dropdown :popper-append-to-body="false" @command="changeTemplateType" class="header-drop">
                <span class="el-dropdown-link">
                  {{ templateCommand.label }}
                  <svg-icon icon-class="tempmore" class="header-img" />
                </span>

                <template #dropdown>
                  <el-dropdown-menu class="header-right-dropdown">
                    <el-dropdown-item v-for="item in templateTypeList" :key="item.value" :command="item.value"
                      :class="templateCommand.value == item.value ? 'isColor' : ''">
                      {{ item.label }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              |
              <el-icon @click="closeCustomDocumentDialog" class="header-close">
                <Close />
              </el-icon>
            </div>
          </div>

          <!-- 左侧导航栏 -->
          <div class="dialog-content">
            <div class="left">
              <div class="left-item" :class="isActived == -2 ? 'isActivedClass' : ''"
                @click="getActived(-2, { realName: '我的模版' })">
                <img style="width: 15px; height: 15px; margin-right: 5px" src="../../../assets/images/template/wen.png"
                  alt="" />
                <span>我的模版</span>
              </div>
              <div class="left-item" :class="isActived == -3 ? 'isActivedClass' : ''"
                @click="getActived(-3, { realName: '公共库收藏' })">
                <img style="width: 15px; height: 15px; margin-right: 5px" src="../../../assets/images/template/shou.png"
                  alt="" />
                <span>公共库收藏</span>
              </div>

              <el-divider></el-divider>
              <div class="left-item" :class="isActived == -1 ? 'isActivedClass' : ''"
                @click="getActived(-1, { realName: '所有资源' })">
                <img style="width: 18px; height: 18px; margin-right: 5px" src="../../../assets/images/template/hot.png"
                  alt="" />
                <span>所有资源</span>
              </div>
              <div v-for="(item, index) in leftList" :key="index" class="left-item"
                :class="isActived == index ? 'isActivedClass' : ''" @click="getActived(index, item)">
                <el-icon>
                  <Expand />
                </el-icon>
                <span>{{ item.dictLabel }}</span>
              </div>
            </div>

            <div class="right" v-loading="loading">
              <div class="right-top">
                <p style="min-width: 100px">{{ rightTitle.realName }}</p>
                <el-button style="margin-right: 25px" v-if="isActived == -2" type="primary"
                  @click="dialogFormVisible = true">
                  上传模版 </el-button>
              </div>
              <div class="right-content"
                :class="rightTitle.realName != '所有资源' && templateList.length == 0 ? 'right-conten-empty' : ''"
                v-infinite-scroll="getTemplateList" :infinite-scroll-disabled="isScroll" infinite-scroll-delay="200"
                infinite-scroll-distance="100px">
                <div class="content-add" @click="getNextUse('')" v-if="
                  rightTitle.realName == '所有资源' &&
                  templateCommand.value != 'form' &&
                  templateCommand.value != 'richText' &&
                  templateCommand.value != ''
                ">
                  <el-icon class="el-icon-plus">
                    <Plus />
                  </el-icon>
                  <!-- <i class="el-icon-plus"></i> -->
                  <span class="content-add-text"> 新建{{ templateCommand.label }} </span>
                </div>

                <DocunentItem v-for="(item, index) in templateList" :key="index" class="content-items" :template="item"
                  :num="index" :thumbnailBase64="true" :isActived="isActived" @getNextUse="getNextUse"
                  @getPreview="getPreview" @collect="collect" @deleteItem="deleteItem" @uploadLibrary="uploadLibrary" />

                <el-empty v-if="rightTitle.realName != '所有资源' && templateList.length == 0 && isActived != -2"
                  description="暂无表单数据,请先去创建表单模板" />

                <div v-if="rightTitle.realName != '所有资源' && templateList.length == 0 && isActived == -2" class="empty">
                  <p class="empty-one">将文档保存为自定义模板</p>
                  <p class="empty-two">选中“个人知识库”中的某条文档，再“右键”选项卡中选择“保存为模版”</p>
                  <el-empty :image="tishi" :image-size="700" description="暂无模版数据,请先创建我的模版" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 选择预览的操作 -->
        <div class="preview-form" v-else-if="commonParams.step == 'preview'">
          <div>
            <p><span class="preview-form-name">模板名称</span>{{ previewForm.templateName }}</p>
            <div class="preview-content">
              <!-- <v-form-render :form-json="previewForm.formJson" :form-data="previewForm.formData" :option-data="previewForm.optionData" ref="vFormRef">
              </v-form-render> -->
            </div>
          </div>

          <div class="preview-bottom">
            <el-button @click="getClosePreview" type="primary">关闭</el-button>
          </div>
        </div>

        <!-- 选择模板之后的操作 -->
        <div class="form-document" v-else>
          <div>
            <div class="form-top">
              <span class="form-top-name">表单名称</span>
              <el-input v-model="templateForm.formName" placeholder="请输入表单名称" maxlength="50" />
            </div>
            <div class="form-content">
              <div class="left-form">
                <!-- <v-form-render
                  :form-json="templateForm.formJson"
                  :form-data="templateForm.formData"
                  :option-data="templateForm.optionData"
                  ref="vFormRef"
                >
                </v-form-render> -->
              </div>
              <div class="right-upload">
                <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :auto-upload="false"
                  :file-list="templateForm.fileList" :on-change="changeFilelist" drag multiple>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
              </div>
            </div>
          </div>

          <div class="form-bottom">
            <el-button @click="getFirstStep">上一步</el-button>
            <el-button @click="submit" type="primary">完成</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- word、ppt、excel、点击使用后-->
    <el-dialog class="addName-dialog" :title="title" v-model="addNameDialog" width="460px"
      :before-close="closeAddNameDialog" :append-to-body="true">
      <div v-loading="Dialogloading">
        <el-form :model="addForm" :rules="addrules" ref="addFormRef" label-position="top">
          <el-form-item label="文档名称" :label-width="formLabelWidth" prop="documentName">
            <el-input v-model="addForm.documentName" placeholder="请输入文档名称"></el-input>
          </el-form-item>
        </el-form>

        <div class="dialog-footer">
          <el-button @click="closeAddNameDialog">取 消</el-button>
          <el-button type="primary" :loading="Btnloading" @click="getAddDocument(addFormRef)">
            <span v-if="!Btnloading">确 定</span>
            <span v-else>创 建 中...</span>
          </el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 上传模版 -->
    <el-dialog width="25%" title="上传模版" v-model="dialogFormVisible" :before-close="Upclose">
      <el-form :model="form" :rules="upRules" ref="upRef">
        <el-form-item label="模版名称" :label-width="formLabelWidth" prop="realName">
          <el-input v-model="form.realName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="选择模版" :label-width="formLabelWidth">
          <el-upload accept=".docx,doc,.xlsx,.pptx" class="upload-demo" :auto-upload="false" action="/"
            :on-change="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1"
            :on-exceed="handleExceed" :file-list="Listfile" ref="uploadRef">
            <el-button type="primary">点击上传</el-button>

            <template #tip>
              <div class="el-upload__tip">只能上传word/excel/ppt文件</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>

      <div class="dialog-footer">
        <el-button @click="Upclose">取 消</el-button>
        <el-button type="primary" @click="confirm(upRef)">确 定</el-button>
      </div>
    </el-dialog>

    <!--上传到公共模版流程  -->
    <TempPublish ref="TempPublishRefs" @submitUpload="submitUpload" />
  </div>
</template>

<script lang="ts" setup>
import {
  ApiTemCreateFile,
  ApiTempData,
  ApiTempTree,
  ApiTempCollection,
  ApiTempAddCollection,
  ApiTempHotName,
  ApiTempRemove,
  ApiTempOrdinary,
  ApiTempverifyData
} from '@/api/personDoc/tempApi'
import TempSearch from '@/views/personDoc/components/temp-search.vue' // 搜索
import DocunentItem from '@/views/personDoc/components/docunent-item.vue' //展示的模板
import TempPublish from '@/views/personDoc/components/temp-pubilsh.vue' //上传到公共模版
const TempPublishRefs = ref(null)
const { proxy } = getCurrentInstance() as any
const searchInput = ref(null)
const uploadRef = ref(null)

import tip from '@/assets/images/template/tishi.png' // 导入图片
const emit: any = defineEmits(['closeDocumentDialog', 'getDatas', 'getAddDocument'])
const isScroll = ref(true)
const tishi = tip
const row = ref({
  id: ''
})
const isShow = ref(false)
const Btnloading = ref(false)

const dialogFormVisible = ref(false) //模板弹框

const form = reactive({
  realName: '',
  file: '' as any
})

const formLabelWidth = ref('120px')
const Listfile = ref([])
const uploadInfo = reactive({
  realName: '',
  parentId: ''
})
const uploadWidth = ref('120px')
const HotNameArr = ref([]) // 热搜词
const visibleCustomDocumentDialog = ref(false) //自定义表单文档弹窗
const searchTemplate = ref(null) // 搜索模板
const templateCommand = ref({
  value: '',
  label: '所有类型'
}) //模板类型

const templateTypeList = ref([
  { value: '', label: '所有类型' },
  { value: 'word', label: 'Word文档' },
  { value: 'excel', label: 'Excel表格' },
  { value: 'ppt', label: 'PPT演示文稿' },
  { value: 'richText', label: '表单文档' }
]) //模板类型循环
const leftList = ref([]) // 左侧导航栏

const isActived = ref(-1) // 判断左侧导航栏是否选中
const rightTitle = ref({ realName: '所有资源', id: null }) //右侧标题
const templateList = ref([]) //模板列表
const commonParams = reactive({
  page: 1,
  size: 20,
  total: 0,
  // 进行的步骤
  step: 'first' // second 下一步 | preview 预览
})
// 表单数据第二步使用
const templateForm = reactive({
  formName: '', //展示表单模板名字
  fileList: [], //文件上传列表
  formJson: {},
  formData: {},
  optionData: {},
  id: null
})

// 预览数据
const previewForm = reactive({
  templateName: '', //展示表单模板名字
  formJson: {},
  formData: {},
  optionData: {},
  id: null
})

// word、ppt、excel、点击使用后
const addForm = reactive({
  documentName: ''
})
const addrules = reactive({
  documentName: [{ required: true, message: '请输入文档名称', trigger: 'blur' }]
})

const addFormRef = ref<FormInstance>()

const addNameDialog = ref(false)
const title = ref('')
const UseType = ref('old')

const addName = ref({} as any)
const loading = ref(false)
const Dialogloading = ref(false)
const IdData = ref(null)
// 获取业务类型选项（左侧导航）
const getleftList = () => {
  let oParam = {
    dictType: 'template_catalogue'
  }

  ApiTempData(oParam).then((res) => {
    if (res.code == 200) {
      leftList.value = res.data
    }
  })
}

// 上传模版.....................start
import type { FormInstance } from 'element-plus'
const upRules = reactive({
  realName: [{ required: true, message: '请输入模版名称', trigger: 'blur' }]
})

//取消上传模版
const Upclose = () => {
  dialogFormVisible.value = false
  form.realName = ''
  Listfile.value = []
  form.file = ''
  uploadRef.value.clearFiles()
}

// 验证数据是否正确
const checkData = () => {
  let oParam = {
    fileSize: Listfile.value[0].size,
    fileName: form.realName,
    fileSuffix: Listfile.value[0].name.split('.').pop() || '',
    type: 'template'
  }

  ApiTempverifyData(oParam).then((res) => {
    if (res.code == 200) {
      Upconfirm()
    } else {
      return false
    }
  })
}

const upRef = ref<FormInstance>()
const confirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      checkData()
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 确认上传
const Upconfirm = async () => {
  let formdata = new FormData()
  formdata.append('file', form.file)
  formdata.append('fileName', form.realName)
  formdata.append('type', 'template')

  ApiTempOrdinary(formdata).then((res) => {
    if (res.code == 200) {
      ElMessage.success(res.msg)
      getTemplateList('reset')
      uploadRef.value.clearFiles()
      form.realName = ''
      dialogFormVisible.value = false
    } else {
      ElMessage.error(res.msg)
    }
    // console.log(res, "000000000");
  })
}
const handleRemove = (file, fileList) => {
  console.log(file, fileList)
}

const handlePreview = (file, fileList) => {
  Listfile.value = fileList

  form.file = file.raw
}

const handleExceed = (files, fileList) => {
  ElMessage.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
}

import type { UploadProps } from 'element-plus'

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(`确定移除 ${uploadFile.name} ?`).then(
    () => true,
    () => false
  )
}

// const beforeRemove = (file, fileList) => {
//   return proxy.$confirm(`确定移除 ${file.name}？`);
// };

//*********************************end */

// 关闭自定义文档
const closeCustomDocumentDialog = () => {
  visibleCustomDocumentDialog.value = false
  Dialogloading.value = false
  templateForm.fileList = [] //文件上传列表
  templateForm.formName = '' //展示表单模板名字
  templateForm.formJson = {}
  templateForm.formData = {}
  templateForm.optionData = {}
  templateForm.id = null

  emit('closeDocumentDialog', 'false')
}

// 公共库收藏
const apiqueryCollectionTemplate = (params) => {
  loading.value = true
  ApiTempCollection(params).then((res) => {
    templateList.value = res.data.rows
    commonParams.total = res.data.total
    loading.value = false
    isScroll.value = false
  })
}

// 获取表单模板接口
const getTemplateList = async (reset) => {
  isScroll.value = true
  // this.loading = true; //需要打开
  if (reset == 'reset') {
    commonParams.page = 0
    templateList.value = []
    commonParams.total = -1
    loading.value = true
  } else {
    if (!(commonParams.total == templateList.value.length)) {
      commonParams.page += 1
    }
  }
  let params = {
    type: templateCommand.value.value || null,
    page: commonParams.page,
    size: commonParams.size,
    realName: searchTemplate.value
  } as any
  if (params.type == 'form') {
    params.formType = 0
  }
  if (!(commonParams.total == templateList.value.length)) {
    if (isActived.value == -3) {
      apiqueryCollectionTemplate(params)
    } else {
      params.parentId = rightTitle.value.id
      params.state = isActived.value == -2 ? 'personal' : 'enterprise'
      await ApiTempTree(params).then((res) => {
        templateList.value = templateList.value.concat(res.data.rows)
        commonParams.total = res.data.total
        loading.value = false
        isScroll.value = false
      })
    }
  }
  // this.loading = false; //需要打开
}

// 文件上传
const changeFilelist = (file) => {
  templateForm.fileList.push(file)
}

//完成
const submit = () => {
  //   if (this.templateForm.formName) {
  //     this.$refs.vFormRef.getFormData().then(
  //       (formData) => {
  //         this.templateForm.formData = formData;
  //         // console.log(this.templateForm, "templateForm");
  //         this.$emit('getSubmit', this.templateForm);
  //         // this.$emit("getDatas");
  //       },
  //       (error) => {
  //         this.$message({
  //           message: '请检查表单必填项是否填写',
  //           type: 'warning'
  //         });
  //       }
  //     );
  //   } else {
  //     this.$message({
  //       message: '请检查表单名称是否填写',
  //       type: 'warning'
  //     });
  //   }
}

// 关闭新建word文档
const closeAddNameDialog = () => {
  addForm.documentName = ''
  addNameDialog.value = false
  Dialogloading.value = false
  loading.value = false
  emit('getDatas')
}

// 新建文档名称
const getAddDocument = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let oParam = {
        id: addName.value.id || null,
        realName: addForm.documentName,
        parentId: IdData.value,
        useType: 'personal', // （个人：personal）
        type: templateCommand.value.value || null,
        createType: UseType.value
      }
      // console.log('🚀 ~ awaitformEl.validate ~ oParam:', oParam);
      Btnloading.value = true
      ApiTemCreateFile(oParam).then((res) => {
        if (res.code == 200) {
          Btnloading.value = false
          getTemplateList('reset')
          ElMessage.success('添加成功')
          emit('getAddDocument')
          closeAddNameDialog()
          proxy?.$yuUtils.onlineEditSkipPage(res.data) //编辑
          // proxy.$yuUtils.previewSkipPage(res.data); //预览
        }
      })
    } else {
      // console.log('error submit!', fields);
    }
  })
}

// 上一步
const getFirstStep = () => {
  commonParams.step = 'first'
  // 清空上传文件列表
  templateForm.fileList = []
}

// 关闭预览
const getClosePreview = () => {
  commonParams.step = 'first'
  getTemplateList('')
  previewForm.formJson = {}
  previewForm.formData = {}
  previewForm.optionData = {}
}

// 搜索
const queryName = (name) => {
  searchTemplate.value = name
  getTemplateList('reset')
}

// 查询热门标题
const getHotName = () => {
  ApiTempHotName().then((res) => {
    HotNameArr.value = res.data
  })
}

// 切换模板类型(docMixins拿到的值过来匹配显示和在弹框内切换时显示)
const changeTemplateType = (command) => {
  // 处理特殊值 "formDocument" 转换为 "richText"
  if (command === 'formDocument') {
    command = 'richText'
  }
  templateCommand.value = templateTypeList.value.find((item) => item.value === command)

  getTemplateList('reset')
}

// 给左边导航选中项添加中样式
const getActived = (index, item) => {
  rightTitle.value.realName = item.realName
  isActived.value = index
  rightTitle.value.id = item.dictSort
  searchTemplate.value = null
  searchInput.value.clear()
  getTemplateList('reset')
}

//调用打开方法
const openTempDialog = (type, val) => {
  // console.log('🚀 ~ openTempDialog ~ val:', val);
  IdData.value = val //拿到点开所在得id

  getleftList() //获取左侧导航数据
  getHotName() //查询热门标题
  changeTemplateType(type)
  visibleCustomDocumentDialog.value = true
}

const outside = ref(false) //判断调用接口
// 上传公共库
const uploadLibrary = (e) => {
  TempPublishRefs.value.openPubilshDialog(e, outside.value)
}

// 删除
const deleteItem = (e) => {
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      // 第二层删除
      let oParam = {
        id: e.id
      }
      await ApiTempRemove(oParam).then((res) => {
        // console.log(res, "删除");
        if (res.code == 200) {
          ElMessage.success('删除成功！')
          getTemplateList('reset')
        }
      })
    })
    .catch(() => {
      ElMessage.info('已取消删除')
    })
}

// 是否收藏
const collect = (e, index) => {
  let oParam = {
    templateId: e.id,
    isAdd: !e.isExistCollection
  }
  ApiTempAddCollection(oParam).then((res) => {
    if (res.code == 200) {
      ElMessage.success(res.msg)
      e.isExistCollection = !e.isExistCollection
      templateList.value.splice(index, 1, e)
      if (isActived.value == -3) getTemplateList('reset')
    } else {
      ElMessage.error(res.msg)
    }
  })
}

// 获取表单文件预览
const getPreview = async (e) => {
  // if (e.libraryType === 'template') {
  //   e.libraryType = 'personal';
  // }

  // 跳转 -重定向跳转(文件预览)
  proxy.$yuUtils.previewSkipPage(e)
  console.log(e, '预览')

  // 第二步  如果是表单文档 getSysFormDocTemp
  //   if (e.type == 'richText') {
  //     let params = {
  //       id: e.fileStorage
  //     };
  //     let fData = await getSysFormDocTemp(params);
  //     this.commonParams.step = 'preview';
  //     this.previewForm.templateName = fData.content[0].formName;
  //     this.$nextTick(() => {
  //       this.previewForm.formJson = this.$refs.vFormRef.setFormJson(fData.content[0].formJson);
  //       this.previewForm.formJson = this.$refs.vFormRef.disableForm();
  //     });
  //     apiaddPreviews({ formId: e.fileStorage }).then((res) => {
  //       // console.log(res, "表单预览了一次");
  //     });
  //   } else {
  //     let routerObj = {
  //       onlineId: e.id,
  //       onlineType: e.libraryType
  //       // onlineType: e.type
  //     };
  //     // e.libraryType = e.type;
  //     this.$yuUtils.OnlineofficeFunc(e, routerObj);
  //   }
  //   this.getTemplateList('reset');
}

//  选择模板使用之后进行下一步
const getNextUse = async (e) => {
  // console.log(e, '使用..');
  if (!e.id) {
    UseType.value = 'new'
  }

  addNameDialog.value = true
  title.value = `新建${templateCommand.value.label}`
  addName.value = e

  // 第二步  如果是表单文档
  // if (e.type == 'richText') {
  //   if (e) {
  //     commonParams.step = 'second';
  //     templateForm.id = e.id;
  //     let params = {
  //       id: e.fileStorage
  //     };

  //     //   let fData = await getSysFormDocTemp(params);
  //     //   this.previewForm.templateName = fData.content[0].formName;
  //     //   this.previewForm.formJson = fData.content[0].formJson;
  //     //   this.$nextTick(() => {
  //     //     this.$refs.vFormRef.setFormJson(fData.content[0].formJson);
  //     //   });
  //   } else {
  //     // 没有e表示+新建，不使用模板
  //     // console.log("跳转路由");
  //     proxy.$router.push({
  //       path: '/bpmn/biaodan',
  //       query: { isNewTemplate: 1 }
  //     });
  //   }
  // } else {
  //   addNameDialog.value = true;
  //   title.value = `新建${templateCommand.value.label}`;
  //   addName.value = e;
  // }
}

const submitUpload = () => {
  getTemplateList('reset')
}

defineExpose({
  //调用组件需要导出 v-model的变量
  openTempDialog,
  getTemplateList
})
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.el-dropdown-link {
  margin-right: 10px;
  cursor: pointer;
  color: black;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;

  .empty-one {
    font-size: 20px;
    font-weight: bold;
  }

  .empty-two {
    font-size: 16px;
  }
}

:v-deep(#custom-document-dialog .dialog-header .header-drop) {
  background-color: #fff !important;
  // width: auto !important;
}

.dialog-header {
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 68px;
  padding: 0px 25px;

  .header-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    min-width: 98px;

    .header-img {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }
  }

  .el-input {
    width: 150%;

    .el-input__inner {
      background-color: rgb(248, 249, 250);
      border-radius: 10px;
    }
  }

  .header-right {
    display: flex;
    align-items: center;

    .header-close {
      margin-left: 10px;
      display: block;
      font-size: 24px;
      width: 32px;
      height: 30px;
      padding: 5px;
      text-align: center;
      vertical-align: middle;
      border-radius: 10px;
      cursor: pointer;
    }

    .header-close:hover {
      background-color: rgb(232, 232, 233);
    }
  }
}

.dialog-content {
  display: flex;
  position: relative;
  height: 100%;
  overflow: hidden;

  .left {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    padding: 17px 0px 8px;
    width: 196px;
    border-right: solid 1px rgba(31, 35, 41, 0.15);
    background-color: white;
    border-radius: 0px 0px 0px 8px;

    .left-item {
      position: relative;
      height: 36px;
      padding: 0px 16px;
      margin: 0px 8px 1px;
      border-radius: 6px;
      background-color: transparent;
      font-weight: 500;
      line-height: 36px;
      color: rgb(31, 35, 41);
      user-select: none;
      cursor: pointer;
      // overflow: hidden; //侧边栏有问题就放开
      overflow: auto;
      white-space: pre;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
      justify-content: space-between;

      img {
        width: 20%;
      }

      span {
        width: 80%;
      }
    }

    .isActivedClass {
      background-color: rgb(240, 244, 255);
      color: rgb(51, 109, 244);
    }
  }

  .right {
    width: 100%;
    flex: 1 1 0%;
    // height: 100%;
    height: 73vh;
    overflow: hidden overlay;
    position: relative;
    padding: 0px 0px 15px 24px;
    background-color: rgb(248, 249, 250);
    border-radius: 0px 0px 8px 0px;

    .right-top {
      width: 100% !important;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 18px;
      font-weight: 500;
      margin: 10px 0px 20px 0px;
      line-height: 32px;

      // .header-button {
      //   float: right !important;
      //   z-index: 99999;
      //   margin-left: 780px;
      // }
    }

    .right-conten-empty {
      justify-content: center;
    }

    .right-content {
      display: flex;
      flex-wrap: wrap;

      // gap: 15px;
      .content-add {
        // width: 23%;
        position: relative;
        cursor: pointer;
        margin: 0px 20px 20px 0px;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 210px;
        height: 256px;
        min-width: 136px;

        // min-width: 165px;
        max-width: 240px;
        overflow: hidden;
        border-radius: 8px;
        box-shadow:
          box-shadow rgba(31, 35, 41, 0.03) 0px 4px 16px 4px,
          rgba(31, 35, 41, 0.02) 0px 4px 8px 0px,
          rgba(31, 35, 41, 0.02) 0px 2px 4px -4px;
        transition:
          box-shadow 0.15s linear 0s,
          transform 0.15s linear 0s;
        cursor: pointer;
        background-color: white;
        transform: translateZ(1px);
        justify-content: center;
        align-items: center;

        .el-icon-plus {
          font-size: 44px;
          color: rgb(51, 109, 244);
        }

        .content-add-text {
          transform: translateZ(0px);
          color: rgb(100, 106, 115);
          font-size: 12px;
          white-space: nowrap;
          margin-top: 8px;
        }
      }

      .content-add:hover {
        // top: -5px;
        box-shadow:
          2px 2px 10px 2px rgb(235, 236, 238),
          -2px -2px 10px 2px rgb(235, 236, 238);
        transform: translate3d(0px, -8px, 0px);
      }
    }
  }
}

// 预览表单样式
.preview-form {
  min-height: 424px;
  height: calc(100vh - 84px);
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  p {
    display: flex;
    justify-content: flex-start;
    font-weight: 700px !important;

    .preview-form-name {
      width: 110px;
      display: block;
      padding-right: 12px;
      text-align: end;
    }
  }

  .preview-content {
    min-height: 264px;
    height: calc(100vh - 250px);
    margin: 20px 0px;
    overflow-y: auto;
  }

  .preview-bottom {
    display: flex;
    justify-content: flex-end;
  }
}

// 填写表单样式
.form-document {
  min-height: 424px;
  height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .form-top {
    padding: 25px 0px;
    height: 75px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .form-top-name {
      display: block;
      width: 110px;
      padding-right: 12px;
      text-align: end;
    }

    .el-input {
      width: 300px;
      // margin-left: 20px;
    }
  }

  .form-content {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    min-height: 264px;
    height: calc(100vh - 250px);

    .left-form {
      overflow-y: auto;
      padding: 25px;
      border-right: 1px solid #ccc;
    }

    .right-upload {
      width: 100%;
      height: 240px;
      overflow-y: auto;
      padding: 25px;
      display: flex;
      // align-items: center;
      flex-direction: column;
    }
  }

  .form-bottom {
    padding: 25px;
    display: flex;
    justify-content: flex-end;
  }
}

//
.addName-dialog {
  z-index: 5000;

  .addName-name {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-input {
      width: 90%;
    }
  }
}

//预览时最小宽度
.second-document {
  .el-dialog {
    min-width: 840px !important;
  }
}
</style>
<style lang="scss">
#custom-document-dialog {
  width: 1180px !important;

  .el-dialog {
    min-height: 424px;
    height: calc(100vh - 84px);
    width: 1229px !important;
    margin-top: 42px !important;
    border-radius: 8px;
    margin: auto;
  }

  .el-dialog__header {
    padding: 0px;
    display: none;
  }

  .el-dialog__body {
    padding: 0px;
    height: 100%;
    overflow: hidden;

    .custom-document {
      height: 100%;
      display: flex;
      flex-direction: column;

      .dialog-header {
        position: relative;
        border-radius: 8px 8px 0px 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 68px;
        font-size: 16px;
        color: #1f2329;
        font-weight: 500;
        padding: 0px 24px 0px 25px;
        background-color: rgb(255, 255, 255);
        border-bottom: 1px solid rgba(31, 35, 41, 0.15);

        .header-input {
          display: flex;
          flex-direction: column;
          // margin: 18px 0px;
          width: 340px;
          border-radius: 2px;
        }

        .header-right {
          display: flex;
          align-items: center;
          -webkit-box-align: center;
          min-width: 140px;

          .header-close {
            width: 32px;
            height: 32px;
            padding: 4px;
            color: #2b2f36;
            line-height: 24px;
            font-weight: 400;
          }
        }
      }
    }
  }

  // -------------
  .dialog-header {
    .el-input__inner {
      background-color: rgb(248, 249, 250);
      border-radius: 4px;
    }

    .el-input__inner:focus {
      border: 1px solid rgba(50, 108, 242);
    }

    .header-drop {
      padding: 2px 5px;
      border-radius: 4px;
      background-color: rgb(219, 229, 252);
      color: rgb(50, 108, 242);
      font-weight: 500;
      font-size: 14px;
      line-height: 22px;
      cursor: pointer;
      margin-right: 5px;
      width: 100%;
      min-width: 100px;
      font-size: 17px;
      line-height: 22px;
      text-align: center;
      vertical-align: middle;
    }
  }
}

.header-right-dropdown {
  .el-dropdown-menu {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
    margin: 0;
    padding: 2px 0;
    text-align: left;
    list-style-type: none;
    background-color: rgb(255, 255, 255);
    background-clip: padding-box;
    border-radius: 6px;
    outline: none;
    box-shadow:
      rgba(31, 35, 41, 0.04) 0px 8px 24px 8px,
      rgba(31, 35, 41, 0.04) 0px 6px 12px 0px,
      rgba(31, 35, 41, 0.06) 0px 4px 8px -8px;
    border: 1px solid rgb(222, 224, 227);
    overflow-y: auto;
    overflow-y: overlay;
  }

  .el-dropdown-menu__item {
    line-height: 22px;
    height: 30px;
    padding: 4px 8px;
    font-size: 14px;
    width: 118px;
    margin: 1px 3px;
    border-radius: 4px;
    cursor: pointer;
    // color: rgb(31, 35, 41);
  }

  .el-dropdown-menu__item:hover {
    background-color: rgb(237, 237, 238);
    color: #606266;
  }

  .isColor {
    color: #336df4 !important;
  }
}

/* 第二步之后的 */
.right-upload {
  .el-upload-list {
    height: 340px;
    overflow-y: auto;
  }
}

@media screen and (max-width: 1288px) {
  #custom-document-dialog {
    :deep(.el-dialog) {
      width: 979px !important;
    }
  }
}

@media screen and (max-width: 1038px) {
  #custom-document-dialog {
    :deep(.el-dialog) {
      width: 729px !important;
    }

    .header-input {
      width: 264px !important;
    }
  }
}

@media screen and (min-width: 788px) {
  #custom-document-dialog {
    .header-input {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

@media screen and (max-width: 788px) {
  #custom-document-dialog {
    :deep(.el-dialog) {
      width: 479px !important;
    }
  }
}

@media screen and (max-width: 538px) {
  #custom-document-dialog {
    :deep(.el-dialog) {
      width: 70% !important;
    }
  }
}
</style>
